<template>
  <div :style="{ paddingTop: paddingTop }">
    <div class="ie-container--fluid">
      <el-image
        src="/static/image/page_default.jpg"
        style="width: 100%; height: 667px; position: absolute"
        fit="cover"
      />
      <div class="ie-container" style="padding-top: 80px; padding-bottom: 42px;">
        <div class="title" style="margin-bottom: 90px;">
          <h2>智慧场景</h2>
          <p>语洲科技联合不同领域合作伙伴探索智慧场景</p>
        </div>

        <section
          v-for="(item, $index) in scenes"
          :key="$index"
        >
          <div class="banner">
            <el-image
              :src="'/static/image/application_0' + ($index + 1) + '.png'"
              style="width: 100%; height: 100%; position: absolute; left: 0;"
              fit="cover"
              lazy
            />
            <div class="banner-box">
              <h3>{{ item.t }}</h3>
              <p>{{ item.p }}</p>
            </div>
          </div>

          <div class="block">
            <div class="t">方案优势</div>
            <div class="v1">
              <a-row :gutter="32">
                <a-col
                  v-for="(v, $subIndex) in item.v"
                  :key="$subIndex"
                  :sm="24 / item.v.length"
                  :xs="24"
                >
                  <div class="block-box">
                    <h4><span>{{ '0' + ($subIndex + 1) }}</span><span>{{ v.t }}</span></h4>
                    <p>{{ v.p }}</p>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>

          <div class="block">
            <div class="t">方案架构</div>

            <div class="v2" v-if="$index === 0">
              <div class="table">
                <div class="th">城市智能运行智慧中心（AIOC）</div>
                <div class="tr">
                  <div class="td" v-for="t in ['监测预警', '决策支持', '协同监督', '联动指挥', '信息发布']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="table">
                <div class="th">应用支持中心</div>
                <div class="tr">
                  <div class="td" v-for="t in ['业务运营', '业务融合', '轻应用开发', '基础技术支持', '数字孪生引擎', '智能交互', '融合通信']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="table">
                <div class="th">AI 服务中心</div>
                <div class="tr">
                  <div class="td td2">模型生产工作站</div>
                  <div class="tr column" style="flex: 4;">
                    <div class="tr">
                      <div class="td" v-for="t in ['城市视觉工作站', '城市语音工作站', '城市认知工作站', '第三方 AI 与知识服务']" :key="t">{{ t }}</div>
                    </div>
                    <div class="td">百度通用 AI 与知识服务</div>
                  </div>
                  <div class="td td2">运营服务工作站</div>
                </div>
              </div>
              <div class="tr">
                <div class="table" style="flex: 2;">
                  <div class="th">数据服务中心</div>
                  <div class="tr">
                    <div class="td" v-for="t in ['数据管理与运营', '数据存储与计算', '治理工具与计算']" :key="t">{{ t }}</div>
                  </div>
                </div>
                <div class="table" style="flex: 3;">
                  <div class="th">全域感知中心</div>
                  <div class="tr">
                    <div class="td" v-for="t in ['物联感知', '时空感知', '视频感知', '互联网感知', '业务感知']" :key="t">{{ t }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="v2" v-if="$index === 1">
              <div class="table">
                <div class="th">用户类型</div>
                <div class="tr">
                  <div class="td" v-for="t in ['产业经济&盈利（政务监督人员）', '园区监督&运营（基地/园区管理人员）', '企业服务&管理（企业管理人员）']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="table">
                <div class="th">运营体系</div>
                <div class="tr column">
                  <div class="tr">
                    <div class="td" v-for="t in ['产业创新', '产业加速', '产业能力提升']" :key="t">{{ t }}</div>
                  </div>
                  <div class="td">创新设施</div>
                </div>
              </div>
              <div class="table">
                <div class="th">N 类应用</div>
                <div class="tr">
                  <div class="td" v-for="t in ['产业融合', '文化展示', '产业扶持', '园区安全', '智慧应用', '企业服务']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="table">
                <div class="th">园区数字化平台</div>
                <div class="tr">
                  <div class="td" v-for="t in ['管理类', '服务类', '运营类', '辅助决策类', '系统基础']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="table">
                <div class="th">技术支撑平台</div>
                <div class="tr">
                  <div class="td" v-for="t in ['一体化融合引擎', '全域数字底座']" :key="t">{{ t }}</div>
                </div>
              </div>
            </div>

            <div class="v2" v-if="$index === 2">
              <div class="table">
                <div class="th">用户</div>
                <div class="tr">
                  <div class="td" v-for="t in ['公安/派出所', '政法委/网格办', '民政', '街道', '社区居委会', '消防', '住建']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="table">
                <div class="th">服务入口</div>
                <div class="tr">
                  <div class="td" v-for="t in ['智慧大屏', '政务微信', '企业微信', '微信小程序/公众号', 'PC 管理端']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="table">
                <div class="th">业务场景</div>
                <div class="tr">
                  <div class="td" v-for="t in ['平安和谐社区', '基层协同治理', '社区多元共治', '社区数据资产']" :key="t">{{ t }}</div>
                </div>
                <div class="tr">
                  <div class="td" v-for="t in ['绿色环保社区', '社区公共服务', '特殊人群关爱', '社区增值运营']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="tr">
                <div class="table" style="flex: 2;">
                  <div class="th">基层治理模块</div>
                  <div class="tr">
                    <div class="td" v-for="t in ['协同治理', '社区综合', '多元共治']" :key="t">{{ t }}</div>
                  </div>
                </div>
                <div class="table" style="flex: 2;">
                  <div class="th">社区服务模块</div>
                  <div class="tr">
                    <div class="td" v-for="t in ['公共服务', '便民服务', '其他服务']" :key="t">{{ t }}</div>
                  </div>
                </div>
                <div class="table">
                  <div class="th">增值运营模块</div>
                  <div class="td">运营资源/工具</div>
                </div>
              </div>
              <div class="table">
                <div class="th">社区底座</div>
                <div class="tr">
                  <div class="td" v-for="t in ['数据资产', '应用开放', '物联引擎', 'AI 服务', '统一认证', '支付服务', '区块链服务']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="table">
                <div class="th">混合云</div>
                <div class="tr">
                  <div class="td" v-for="t in ['人工智能', '大数据', '政务云', '通信', '音视频', '中间件', '计算', '存储', '网络', '数据库']" :key="t">{{ t }}</div>
                </div>
              </div>
              <div class="table">
                <div class="th">社区基层设施</div>
                <div class="tr">
                  <div class="td" v-for="t in ['门禁机', 'AI 摄像机', '停车道闸', '水电气表', '消防设备', '便民货柜']" :key="t">{{ t }}</div>
                </div>
              </div>
            </div>

          </div>
        </section>

      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useMq } from 'vue3-mq'

const mq = useMq()
const paddingTop = computed(() => {
  return mq.mdMinus ? '80px' : '100px'
})

const scenes = [
  {
    t: '智慧城市解决方案',
    p: '生态”的发展战略，充分发挥百度在数据、技术、生态和安全等方面优势，解决城市发展过程中面临的诸多问题',
    v: [
      {
        t: '数据优势',
        p: '通过汇聚、关联时空数据、互联网数据、物联网数据，为城市构筑全面感知能力，索引城市万物，实时感知和洞察城市态势'
      },
      {
        t: '技术优势',
        p: '国内最早投入、技术最强、布局最完整的人工智能领军企业，利用百度先进的AI技术，全面赋能各行业应用'
      },
      {
        t: '生态优势',
        p: '构建开放、合作、创新、共赢的城市智能创新生态，促进数据、技术的快速增长，以智能经济推动城市产业发展'
      },
      {
        t: '安全保障',
        p: '百度领先的数据安全能力和技术，覆盖数据资产管理、敏感数据处理及安全合规三大场景，实现数据全生命周期防护'
      }
    ]
  },
  {
    t: '未来园区解决方案',
    p: '打造未来园区建设运营一体化方案，组件形成区域新的经济增长极，最终形成功能完善的产业新城',
    v: [
      {
        t: '新园区',
        p: '打造物理空间管理、信息系统辐射、智慧化运营三位一体的园区数字化管理运营体系'
      },
      {
        t: '新产业',
        p: '营造园区内一流的营商发展环境和产业文化环境，加速人流、物流、资金流、信息流集聚，促进生产要素高效流转和节约集约使用'
      },
      {
        t: '新城镇',
        p: '产业发展带动生产人口的集聚和园区周边的城镇化水平持续提升，实现城市结构的连锁推动效应，改变城市配套服务设施部署和公共资源配置格局'
      }
    ]
  },
  {
    t: '未来社区解决方案',
    p: '为政府、居民、企业提供全方位解决方案，集基层治理、社区服务于一体，打造便捷安全的智慧社区综合体，提升居民幸福感、获得感和安全感',
    v: [
      {
        t: '高效连接',
        p: '基于微信海量用户与企业微信，实现居民、政府、企业三端的高效连接，打造亲民便民的社区治理和服务体系'
      },
      {
        t: '智慧管理',
        p: '融合物联网、5G、人工智能、大数据等技术实现全域感知，全时响应，对接智慧城市IOC平台，打造社区智慧化治理空间'
      },
      {
        t: '多元服务',
        p: '基于微信小程序和公众号打造服务入口，多维度服务能力灵活扩展，构建全链路社区生活业态，实现社区服务全场景多群体覆盖'
      },
      {
        t: '运营赋能',
        p: '结合腾讯系流量生态与本地化资源，为居民及合作伙伴打造增值运营环境，实现建设与运营双循环，助力政府可持续化运营'
      }
    ]
  }
]

</script>

<style lang="less" scoped>
.page {
  background-color: #F8F9FA;
}

.title {
  line-height: 1.5;
  text-align: center;

  h2 {
    color: #272E3B;
    font-size: 32px;
    margin-bottom: 18px;
  }

  p {
    color: #7D7D7D;
    font-size: 16px;
  }
}

.banner {
  height: 240px;
  position: relative;
  border-radius: 18px;
  margin-bottom: 60px;
  overflow: hidden;

  &:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }

  &-box {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 0 80px;
    position: relative;
    color: #FFF;
    z-index: 2;

    h3 {
      font-size: 26px;
      line-height: 1.5;
      margin-bottom: .5em;
    }

    p {
      font-size: 15px;
      line-height: 1.8;
      max-width: 550px;
      opacity: .8;
    }
  }
}

.block {
  padding: 0 60px;

  .t {
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    color: #272E3B;
    position: relative;
    margin-bottom: 50px;

    &:before {
      content: '';
      height: 24px;
      width: 4px;
      background-color: #165DFF;
      display: inline-block;
      vertical-align: top;
      margin-top: 4px;
      margin-right: 25px;
    }
  }

  .v1 {
    background-color: #FFF;
    background-image: linear-gradient(225deg, #E9F2FD 0%, #FFFFFF 100%);
    border-radius: 8px;
    padding: 48px;
    margin-bottom: 25px;

    .block-box {
      margin-bottom: 25px;

      h4 {
        font-size: 20px;
        color: #165DFF;
        margin-bottom: 20px;

        span {
          margin-right: 12px;
        }
      }

      p {
        font-size: 14px;
        color: #48494B;
        line-height: 24px;
        text-align: justify;
      }
    }
  }

  .v2 {
    margin-bottom: 108px;

    .table {
      font-size: 16px;
      text-align: center;
      background-color: #F2F3F4;
      flex: 1;
      padding: .75em 0 0 .75em;
      margin-bottom: .75em;
    }

    .tr {
      display: flex;

      &.column {
        flex-direction: column;
      }
    }

    .th {
      color: #FFF;
      background-color: #3D76F7;
      line-height: 1.5em;
      padding: .75em 0;
      flex: 1;
      margin: 0 .75em .75em 0;
    }

    .td {
      color: #333;
      background-color: #FFF;
      line-height: 1.5em;
      padding: .75em 0;
      flex: 1;
      margin: 0 .75em .75em 0;
      justify-content: center;
      align-content: center;
      flex-wrap: nowrap;
    }

    .td2 {
      padding: (3em - .75em / 2) 0;
    }
  }
}

.mini {

  .banner {
    margin-bottom: 25px;

    .banner-box {
      padding: 25px;
    }
  }

  .block {
    padding: 0;

    .t {
      margin-bottom: 25px;
    }

    .v2 {
      margin-bottom: 25px;

      .table {
        font-size: 10px;
      }
    }
  }
}
</style>